<template>
	<view class="page">
		<view class="top">
			{{detail.orderStatus == 1 ? '未支付' : detail.orderStatus == 2 ? '待发货' : detail.orderStatus == 3 ? '已发货' : detail.orderStatus == 4 ? '已确认' : detail.orderStatus == 5 ? '已取消' : '' }}
		</view>
		<view class="centent">
			<view class="address dis aic jcsb">
				<view class="">
					<view class="dis aic ">
						<view class="name">收件人：{{detail.memberName}} </view>
						<view class="phone">{{detail.phone}}</view>
					</view>
					<view class="add">{{detail.province}}{{detail.city}}{{detail.area}}{{detail.address}}</view>
				</view>
				<view class="icon_box">
					<image src="/static/icon/icon_right.png" mode="widthFix" style="width: 100%;"></image>
				</view>
			</view>
			<view class="detail ">
				<view class="dis aic jcsb" v-for="(item,index) in detail.groupGoods" :key="index">
					<view class="img_box">
						<image :src="item.image" mode="aspectFit" style="width: 100%;height: 100%;"></image>
					</view>
					<view>
						<view class="name">
							{{item.goodName}}
						</view>
						<view class="name">
							{{item.price}}元
						</view>
						<view class="buyNum">
							×{{item.buyNum}}
						</view>
					</view>
				</view>
				<view class="sumPrice">
					总计：{{detail.amount}}
				</view>
			</view>
			<view class="li">
				<view class="lable">
					订单编号
				</view>
				<view class="value dis aic">
					<view class="">{{detail.orderNo}}</view>
					<view class="copy" @click="copy(detail.orderNo)">复制</view>
				</view>
			</view>
			<view class="li">
				<view class="lable">
					下单时间
				</view>
				<view class="value ">
					<view class="">{{detail.createTime}}</view>
				</view>
			</view>
			<view class="li" v-if="detail.expressName	">
				<view class="lable">
					快递名
				</view>
				<view class="value dis aic">
					<view class="">{{detail.expressName}}</view>
					<!-- <view class="copy">复制</view> -->
				</view>
			</view>
			<view class="li" v-if="detail.expressNo	">
				<view class="lable">
					快递单号
				</view>
				<view class="value dis aic">
					<view class="">{{detail.expressNo}}</view>
					<view class="copy" @click="copy(detail.expressNo)">复制</view>
				</view>
			</view>
		</view>
		<view class="btns">

			<view class="btn" v-if="detail.orderStatus == 3" @click='confirm'>
				确认收货
			</view>
			<view class="btn" v-if="detail.orderStatus == 5" @click="del">
				删除订单
			</view>
			<view class="btn" v-if="detail.orderStatus == 1 || detail.orderStatus == 2 " @click="close">
				取消订单
			</view>
			<view class="btn" v-if="detail.orderStatus == 1" @click="pay">
				去支付
			</view>
		</view>



	</view>
</template>

<script>
	import {
		groupOrderDetail,
		groupOrderDeleteOrder,
		groupOrderConfirm,
		groupOrderPay,
		cancelOrder,

	} from '@/api.js'
	export default {
		data() {
			return {
				orderNo: '',
				detail: {}
			}
		},

		onLoad(opt) {
			if (opt.orderNo) {
				this.orderNo = opt.orderNo
				this.getDetail()

			}
		},

		methods: {
			async close() {
				let res = await cancelOrder({
					orderNo: this.orderNo
				})
				if (res.code == 200) {
					uni.showToast({
						title: '已取消',
						icon: 'none'
					});
					this.getDetail()
				}

			},

			async pay() {

				let that = this

				let res = await groupOrderPay({
					orderNo: this.orderNo
				})
				if (res.code == 200) {
					let temp = res.result
					WeixinJSBridge.invoke('getBrandWCPayRequest', {
							"appId": temp.appId, //公众号ID，由商户传入     
							"timeStamp": temp.timeStamp, //时间戳，自1970年以来的秒数     
							"nonceStr": temp.nonceStr, //随机串     
							"package": temp.package,
							"signType": temp.signType, //微信签名方式：     
							"paySign": temp.paySign //微信签名 
						},
						function(res) {
							if (res.errMsg == 'chooseWXPay:ok') {
								that.getDetail()
							}
						})

				}





			},
			async confirm() {
				let res = await groupOrderConfirm({
					orderNo: this.orderNo
				})
				if (res.code == 200) {
					uni.showToast({
						title: '确认收货成功',
						icon: 'none'
					});
					this.getDetail()
				}

			},
			async del() {
				let res = await groupOrderDeleteOrder({
					orderNo: this.orderNo
				})
				if (res.code == 200) {
					uni.showToast({
						title: '删除成功',
						icon: 'none'
					});
					setTimeout(() => {
						uni.navigateBack()
					}, 2000)
				}
			},
			copy(text) {
				uni.setClipboardData({
					data: text,
					success: () => {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						});
					},
					fail: (err) => {
						uni.showToast({
							title: '复制失败',
							icon: 'none'
						});
					}
				});
			},
			async getDetail() {
				let res = await groupOrderDetail({
					orderNo: this.orderNo
				})
				if (res.code == 200) {
					this.detail = res.result
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.page {
		height: 100vh;
		width: 750rpx;
		background: #FF9C06;
	}

	.top {
		width: 750rpx;
		height: 170rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-family: Roboto, Roboto;
		font-weight: bold;
		font-size: 33rpx;
		color: #FFFFFF;
	}

	.centent {
		background: #fff;
		width: 750rpx;
		box-shadow: 0rpx 7rpx 11rpx 0rpx rgba(233, 233, 233, 0.25);
		border-radius: 27rpx 27rpx 0rpx 0rpx;
		height: calc(100vh - 170rpx);

		.address {
			width: 750rpx;
			height: 180rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 7rpx 11rpx 0rpx rgba(233, 233, 233, 0.25);
			border-radius: 27rpx 27rpx 0rpx 0rpx;
			padding: 50rpx 40rpx;
			box-sizing: border-box;

			.icon_box {
				width: 22rpx;
			}

			.name {
				font-family: Roboto, Roboto;
				font-weight: bold;
				font-size: 26rpx;
				color: #303030;
			}



			.phone {
				font-family: Roboto, Roboto;
				font-size: 27rpx;
				color: #6C6C6C;
				margin-left: 20rpx;
			}

			.add {
				font-family: Roboto, Roboto;
				font-weight: 500;
				font-size: 25rpx;
				color: #6C6C6C;
				margin-top: 20rpx;
			}
		}

		.detail {
			padding: 0 30rpx;
			box-sizing: border-box;
			margin-bottom: 40rpx;

			.img_box {
				width: 284rpx;
				height: 176rpx;
			}

			.name {
				font-family: Roboto Mono, Roboto Mono;
				font-weight: 300;
				font-size: 33rpx;
				color: #000000;
				width: 364rpx;
			}

			.buyNum {
				font-family: Roboto, Roboto;
				font-size: 24rpx;
				color: #303030;
				text-align: right;
			}

			.price {
				font-family: Roboto, Roboto;
				font-weight: 500;
				font-size: 43rpx;
				color: #000000;
				text-align: right;
				margin-top: 40rpx;
			}
		}

		.li {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 30rpx 0 0 0;
			padding: 0 30rpx;
			box-sizing: border-box;


			.lable {
				width: 101rpx;
				height: 29rpx;
				font-family: Roboto, Roboto;
				font-weight: 500;
				font-size: 25rpx;
				color: #696969;
			}

			.value {
				height: 29rpx;
				font-family: Roboto, Roboto;
				font-weight: 500;
				font-size: 25rpx;
				color: #646464;
			}

			.copy {
				width: 60rpx;
				height: 29rpx;
				font-family: Roboto, Roboto;
				font-weight: 500;
				font-size: 22rpx;
				color: #FF7373;
				text-align: center;
				background: #FFFFFF;
				border-radius: 2rpx 2rpx 2rpx 2rpx;
				border: 2rpx solid #FF7373;
				margin-left: 10rpx;
			}
		}
	}

	.btns {
		position: fixed;
		bottom: 60rpx;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 750rpx;

		.btn {
			margin: 0 20rpx;
			width: 250rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			background: #FF9C06;
			color: #fff;
			border-radius: 1812rpx 1812rpx 1812rpx 1812rpx;
		}
	}


	.sumPrice {
		font-family: Noto Sans SC, Noto Sans SC;
		font-weight: bold;
		font-size: 28rpx;
		color: red;
	}
</style>